<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Galgame H5 模板</title>
<style>
*{box-sizing:border-box;margin:0;padding:0}
html,body,#app{height:100%}
body{font-family:"Microsoft YaHei",sans-serif;background:#000;color:#fff;overflow:hidden;}

.bg{position:fixed;inset:0;background:#111 url('./bg.jpg') center/cover no-repeat;filter:brightness(.6);transition:filter .6s}
.stage{position:absolute;left:50%;bottom:20%;transform:translateX(-50%);width:100%;max-width:1366px;height:50%;pointer-events:none;}
.char{position:absolute;bottom:0;left:50%;transform:translateX(-50%);max-height:100%;transition:opacity .4s,transform .4s;}
.char.left{left:30%;transform:translateX(-50%)}

.ui{position:absolute;left:50%;transform:translateX(-50%);bottom:2vh;width:96%;max-width:1200px;padding:18px;border-radius:14px;background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.35));backdrop-filter: blur(6px);box-shadow:0 8px 30px rgba(0,0,0,0.6);}
.meta{display:flex;align-items:center;gap:12px;}
.portrait{width:46px;height:46px;border-radius:8px;overflow:hidden;background:#222;}
.name{font-weight:700;font-size:16px;}
.text{margin-top:12px;font-size:16px;line-height:1.6;min-height:64px;}

.choices{margin-top:12px;display:flex;flex-direction:column;gap:8px;}
.choice{padding:10px 12px;border-radius:10px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);cursor:pointer;user-select:none;}
.choice:active{transform:scale(.995);}

.controls{position:fixed;right:12px;top:12px;display:flex;gap:8px;}
.btn{background:rgba(0,0,0,0.5);color:#fff;border:1px solid rgba(255,255,255,0.3);padding:8px 10px;border-radius:8px;font-size:13px;cursor:pointer;}

@media (max-width:600px){
  .stage{height:48vh;bottom:6vh}
  .ui{padding:14px;border-radius:12px}
  .text{font-size:15px}
}
</style>
</head>
<body>
<div class="bg" id="bg"></div>

<div id="app">
  <div class="stage" id="stage">
    <img id="charImg" class="char" src="" alt="角色" style="opacity:0">
  </div>

  <div class="ui" id="ui">
    <div class="meta">
      <div class="portrait"><img id="porImg" src="" alt="" style="width:100%;height:100%;object-fit:cover"></div>
      <div class="name" id="speaker">——</div>
      <div style="flex:1"></div>
      <div style="opacity:.6;font-size:13px">Galgame H5 模板</div>
    </div>
    <div class="text" id="text"></div>
    <div class="choices" id="choices" style="display:none"></div>
  </div>
</div>

<div class="controls">
  <button class="btn" id="startBtn">开始</button>
  <button class="btn" id="skipBtn">跳过</button>
  <button class="btn" id="muteBtn">静音</button>
  <button class="btn" id="fsBtn">全屏</button>
</div>

<audio id="bgm" loop src="./bgm.mp3"></audio>

<script>
const charImg = document.getElementById('charImg');
const porImg = document.getElementById('porImg');
const speakerEl = document.getElementById('speaker');
const textEl = document.getElementById('text');
const choicesEl = document.getElementById('choices');
const startBtn = document.getElementById('startBtn');
const skipBtn = document.getElementById('skipBtn');
const muteBtn = document.getElementById('muteBtn');
const fsBtn = document.getElementById('fsBtn');
const bgm = document.getElementById('bgm');

let typing = false;
let typingTimer = null;
let currentIndex = 0;
let currentPor = ''; // 当前头像

// 剧情数据
const scriptData = [
  {speaker:'旁白', text:'午后的校园，你漫步在落叶小路上……', por:'./xf.png'},
  {speaker:'吓出bug', text:'啊！撞到你了！', char:'./char_bug_surprise.png', por:'./por_bug.png'},
  {speaker:'你', text:'没关系，你是新生吗？', char:'./char_you.png', por:'./por_you.png'},
  {speaker:'吓出bug', text:'嗯，我叫吓出bug，喜欢画画和B站。', char:'./char_bug_happy.png', por:'./por_bug.png'},

  {speaker:'吓出bug', text:'一起尝试做UP主吗？', char:'./char_bug_think.png', por:'./por_bug.png', choices:[
    {text:'答应合作', goto:10},
    {text:'拒绝独自尝试', goto:50}
  ]},

  {id:10, speaker:'你', text:'好啊，我们可以结合游戏和绘画！', char:'./char_you.png', por:'./por_you.png'},
  {speaker:'吓出bug', text:'太好了，我来画立绘，你来剪辑视频！', char:'./char_bug_happy.png', por:'./por_bug.png'},
  {speaker:'旁白', text:'你们的合作开始了，阳光下，她的笑容温暖如光。', por:'./xf.png'},
  {speaker:'系统', text:'第一个点赞到达！', por:'./xt.png'},
  {speaker:'吓出bug', text:'要不要做特别企划？', char:'./char_bug_think.png', por:'./por_bug.png', choices:[
    {text:'尝试特别企划', goto:20},
    {text:'继续日常更新', goto:30}
  ]},
  {id:20, speaker:'你', text:'好啊，这样更有趣！', char:'./char_you.png', por:'./por_you.png'},
  {speaker:'旁白', text:'你们的第一次企划录制，配合默契，笑声不断。', por:'./xf.png'},
  {speaker:'系统', text:'视频播放量快速增长！', por:'./xt.png'},
  {speaker:'旁白', text:'你们的频道和感情悄悄升温。', por:'./xf.png', goto:null},

  {id:30, speaker:'你', text:'先稳住日常更新吧。', char:'./char_you.png', por:'./por_you.png'},
  {speaker:'旁白', text:'每天更新一点内容，粉丝慢慢熟悉你们。', por:'./xf.png', goto:null},

  {speaker:'系统', text:'粉丝突破5万，你们的视频成为热门话题。', por:'./xt.png', goto:null},
  {speaker:'旁白', text:'最终，你们的频道收获粉丝，也收获甜蜜的日常。', por:'./xf.png', choices:[], goto:null},

  {id:50, speaker:'你', text:'我想自己单独尝试做UP主。', char:'./char_you.png', por:'./por_you.png'},
  {speaker:'吓出bug', text:'好吧，祝你好运！', char:'./char_bug_sad.png', por:'./por_bug.png'},
  {speaker:'旁白', text:'你决定独自行动，未来会遇到怎样的挑战？', por:'./xf.png', choices:[
    {text:'坚持努力', goto:60},
    {text:'迷茫路线', goto:70}
  ]},
  {id:60, speaker:'旁白', text:'你独自运营频道，每天剪辑、录制视频，粉丝缓慢增长。', por:'./xf.png'},
  {speaker:'系统', text:'播放量慢慢增加……', por:'./xt.png'},
  {speaker:'旁白', text:'你积累了小批忠实粉丝，虽然孤独，但很踏实。', por:'./xf.png', choices:[], goto:null},

  {id:70, speaker:'旁白', text:'你感到孤单与迷茫，怀疑自己的选择。', por:'./xf.png'},
  {speaker:'你', text:'也许我需要改变策略或寻求合作。', char:'./char_you_think.png', por:'./por_you.png'},
  {speaker:'旁白', text:'你选择独自前行，故事在这里暂时画上句号。', por:'./xf.png', choices:[], goto:null},
  {speaker:'系统', text:'视频播放量依旧缓慢，但你坚持更新……', por:'./xt.png', choices:[], goto:null}
];

// 建立 id → 数组索引映射
const idMap = {};
scriptData.forEach((node,index)=>{
  if(node.id!==undefined) idMap[node.id] = index;
});

// 打字机效果
function typeText(str,speed=28){
  clearInterval(typingTimer);
  typing=true;
  textEl.textContent='';
  let i=0;
  typingTimer=setInterval(()=>{
    textEl.textContent+=str[i];
    i++;
    if(i>=str.length){
      clearInterval(typingTimer);
      typing=false;
      showChoices();
    }
  },speed);
}

// 显示剧情节点
function showNode(index){
  if(index===null || index>=scriptData.length) return;
  currentIndex = index;
  const node = scriptData[index];

  // 更新立绘
  if(node.char){ charImg.src=node.char; charImg.style.opacity=1; }
  else{ charImg.style.opacity=0; }

  // 更新头像
  if(node.por){ porImg.src=node.por; currentPor=node.por; }
  else if(currentPor){ porImg.src=currentPor; }

  // 更新说话者
  speakerEl.textContent = node.speaker;

  // 打字机显示文本
  typeText(node.text);
}

// 显示选项
function showChoices(){
  const node = scriptData[currentIndex];
  if(node.choices && node.choices.length){
    choicesEl.innerHTML='';
    choicesEl.style.display='flex';
    node.choices.forEach(c=>{
      const btn=document.createElement('div');
      btn.className='choice';
      btn.textContent=c.text;
      btn.onclick=()=>{
        choicesEl.style.display='none';
        const targetIndex = idMap[c.goto] ?? c.goto;
        showNode(targetIndex);
      };
      choicesEl.appendChild(btn);
    });
  } else choicesEl.style.display='none';
}

// 下一条剧情
function nextNode(){
  if(typing){
    clearInterval(typingTimer);
    textEl.textContent = scriptData[currentIndex].text;
    typing=false;
    showChoices();
    return;
  }
  const node = scriptData[currentIndex];
  if(node.choices && node.choices.length) return; // 有选择不自动下一条
  if(node.goto===null) return; // 终点节点不跳转
  showNode(currentIndex+1);
}

// 按钮事件
startBtn.onclick = ()=>{ bgm.play(); showNode(0); }
skipBtn.onclick = ()=>{ nextNode(); }
muteBtn.onclick = ()=>{
  bgm.muted = !bgm.muted;
  muteBtn.textContent = bgm.muted ? '取消静音':'静音';
}
fsBtn.onclick = ()=>{
  if(!document.fullscreenElement) document.documentElement.requestFullscreen();
  else document.exitFullscreen();
}

// 点击文本区继续
textEl.onclick = ()=>{ nextNode(); }
</script>
</body>
</html>
